import React, { Component } from 'react';
import { connect } from 'dva';
import ReactDOM from 'react-dom';
import styles from './VideoList.less';

@connect(({ video }) => ({
  videoList: video.videoList,
}))
class VideoList extends Component {
  state = {
    page_num_now: 0,
    page_num_max: 0,
    video_list: [],
  };

  generateVideoList(videoList) {
    let res = [];
    if (videoList && videoList.data_list) {
      for (let i = 0; i < videoList.data_list.length; i++) {
        res.push(
          <a
            key={'video_list_' + (this.state.page_num_now * 5 + i)}
            href={videoList.data_list[i].original_url}
          >
            <div className={styles.videoListCard}>
              <img className={styles.videoListImg} src={videoList.data_list[i].image_url} />
              <div className={styles.videoListTitle}>{videoList.data_list[i].title}</div>
            </div>
          </a>
        );
      }
    }
    return res;
  }

  updateData() {
    const { dispatch } = this.props;
    dispatch({
      type: 'video/queryVideoList',
      payload: {
        page_size: 5,
        page_num: this.state.page_num_now + 1,
        type: 232861,
      },
    });
  }

  componentDidMount() {
    this.updateData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.videoList != this.props.videoList) {
      let res = this.generateVideoList(this.props.videoList);
      this.setState({
        video_list: this.state.video_list.concat(res),
      });
    }
  }

  ReactDOM;
  render() {
    let { videoList } = this.props;
    const that = this;

    function listNext() {
      that.setState(
        {
          page_num_now: that.state.page_num_now + 1,
        },
        () => {
          if (that.state.page_num_now > that.state.page_num_max) {
            that.updateData();
            that.setState({ page_num_max: that.state.page_num_now }, () => {
              that.scrollingDiv.style.left = that.state.page_num_now * -1170 + 'px';
            });
          } else {
            that.scrollingDiv.style.left = that.state.page_num_now * -1170 + 'px';
          }
        }
      );
    }

    function listPrev() {
      that.setState(
        {
          page_num_now: that.state.page_num_now > 0 ? that.state.page_num_now - 1 : 0,
        },
        () => {
          that.scrollingDiv.style.left = that.state.page_num_now * -1160 + 'px';
        }
      );
    }

    return (
      <div>
        <img
          src={require('./images/left_arrow.jpg')}
          className={styles.leftArrow}
          onClick={() => {
            listPrev();
          }}
        />
        <img
          src={require('./images/right_arrow.jpg')}
          className={styles.rightArrow}
          onClick={() => {
            listNext();
          }}
        />
        <div className={styles.videoScroller}>
          <div className={styles.videoList} ref={c => (this.scrollingDiv = c)}>
            {this.state.video_list}
          </div>
        </div>
      </div>
    );
  }
}

export default VideoList;
